import {
  PageContainer,
} from '@ant-design/pro-components';
import '@umijs/max';
import React, {useEffect, useState} from 'react';

import {Card, Col, message, Row} from "antd";
import {TopInvoke} from "@/components/analysis/topInvoke";
import {TrafficForecastChart} from "@/components/analysis/trafficForecastChart";
import {RealtimeTraffic} from "@/components/analysis/realtimeTraffic";
import {TrafficSummary} from "@/components/analysis/trafficSummary";
import {getInterfaceNamesUsingGet} from "@/services/api-backend/interfaceInfoController";
import {storage} from "@/utils/storage";
import {LocalStorageKeys} from "@/contants/LocalStorageKeys";
import {TTL} from "@/contants/CommonContatns";
import {useParams} from "@@/exports";
import {useLocation} from "@umijs/max";
import {TopForecast} from "@/components/analysis/topForecast";


const typeList=["upload","use","all"]
const InterfaceInfoAnalysis: React.FC = () => {
  const [data,setData]=useState<{id: number, name: string}[]>([])
  const {pathname} = useLocation();
  const [type,setType]=useState<number>()
  const loadData=async (value:number)=>{
    try {
      // const key=LocalStorageKeys.INTERFACE_NAMES
      // const storageData=storage.get<{id: number, name: string}[]>(key)
      // if(storageData){
      //   setData(storageData)
      //   return
      // }
      const {data:response} =await getInterfaceNamesUsingGet({type:value})
      if(response&&response?.length>0){
        const items=response.map(i=>(
          {
            id: i.id!,
            name: i.name!
          }
        ))
        setData(items)
        // storage.set(key,items,TTL.ONE_DAY)
      }
    }catch (e){
      message.error("接口信息获取失败，",e)
    }
  }


  useEffect(() => {
    const lastSlashIndex = pathname.lastIndexOf('/');
    const last=pathname.slice(lastSlashIndex + 1)
    if(typeList.includes(last)){
      if(last==="all"){
        loadData(0)
        setType(0)
      }else if(last==="upload"){
        loadData(1)
        setType(1)
      }else if(last==="use"){
        loadData(2)
        setType(2)
      }
    }
  }, []);

  return (
    <PageContainer>
      <Row gutter={[16, 16]} justify="space-between">
        <Col  span={24}>
          <Card title={"TopN 调用次数最多的接口"} bordered={false}>
            <TopInvoke type={type}/>
          </Card>
        </Col>
        <Col  span={24}>
          <Card title={"热门接口预测排行"} bordered={false}>
            <TopForecast type={type}/>
          </Card>
        </Col>
        <Col  span={24}>
          <Card title={"接口流量预测"} bordered={false}>
            <TrafficForecastChart infoVo={data}  type={type}/>
          </Card>
        </Col>
        <Col  span={24}>
          <Card title={"实时流量监控数据（最近1小时）"} bordered={false}>
            <RealtimeTraffic infoVo={data}  type={type}/>
          </Card>
        </Col>

        <Col  span={24}>
          <Card title={"指定接口流量统计摘要"} bordered={false}>
            <TrafficSummary infoVo={data}  type={type}/>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};
export default InterfaceInfoAnalysis;
